<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
<!--  <div>-->
<!--    <el-radio v-model="chatType" label="1">知识库</el-radio>-->
<!--    <el-radio v-model="chatType" label="2">低代码</el-radio>-->
<!--  </div>-->
  <avue-chat ref="chat"
             :keylist="keylist"
             @keysend="handleSubmit"
             @keyadd="handleAdd"
             :config="config"
             @submit="handleSubmit"
             v-model="msg"
             :list="list">

  </avue-chat>
</template>
<script>
  import {sendContent} from "@/framework-admin/api/chatgpt/index";
  import website from '@/framework-core/config/website';
  import {timestampToTime,timeToString} from "@/framework-core/utils/util";

  const myconfig =  {
    img: '/img/user.jpg',
    your: '/img/userPic.jpg',
    name: 'aseyun 数字助手2',
    dept: '数字教育'
  }
  export default {
    data () {
      return {
        config: myconfig,
        myEventSource:{},
        sessionId : new Date().getTime() + "-" + Math.random(),
        chatType:1,
        kid:"",
        sid:"",
        keylist: [
          '您好，可以帮忙刷一下课程吗？',
          '您好，这个视频看不了'
        ],
        msg: '',
        lastAiMsg:undefined,
        list: [
          {
            "date":  timeToString(new Date(),"yyyy-MM-dd hh:mm:ss"),
            "text": {
              "text": '我是数字助手aseyun，很高兴为您服务'
            },
            "mine": false,
            "img": myconfig.img,
            "name": myconfig.name
          }
        ]
      }
    },
    mounted () {
      this.myEventSource = new EventSource( website.baseUrl+'/api/gtp/sse/subscribe?sessionId=' + this.sessionId);
      let self = this;//因EventSource中this的指向变了，所以要提前存储一下
      this.myEventSource.onopen = function() {
        console.log('项目链接Eventsource成功');
      };
      this.myEventSource.onmessage = function(event) {
        var text = event.data;
        console.log('返回数据:'+text);

        self.$refs.chat.pushMsg({

          "date":   timeToString(new Date(),"yyyy-MM-dd hh:mm:ss"),
          "mine": false,
          "img": myconfig.img,
          "name": myconfig.name,
          "text": {
            "text": text
          },
        });


      };
      this.myEventSource.onerror = function (){
        console.log('项目Eventsource链接失败');

      };
    }
   ,
    methods: {
      fixMarkdown(message) {
        message = message.replaceAll('<br>', '\n');
        message = message.replaceAll('&nbsp;', ' ');
        // message = message.replaceAll('&lt;','<');
        // message = message.replaceAll('&gt;','>');
      //  let converter = new showdown.Converter();
        return message;
      },
      handleAdd (msg) {
        this.keylist.push(msg);
        this.$message.success('快捷回复语添加成功')
      },
      handleSubmit (msg) {
        this.msg = msg || this.msg
        this.$refs.chat.pushMsg({

          "date":   timeToString(new Date(),"yyyy-MM-dd hh:mm:ss"),
          "img": this.config.your,
          "text": {
            "text": this.msg
          },
          "mine": true
        });
        var tempsmg =  this.msg;
        this.msg = '';
        //this.$refs.chat.rootSendMsg();
        this.getMsg(tempsmg);
      },
      //智能题库
      getMsg (msg) {
        let useLk = localStorage.getItem("useLk")||true;
        let useHistory = localStorage.getItem("useHistory")||false;
        let data = {"sessionId":this.sessionId,"content":msg,"sid":this.sid,"useLk":useLk,"useHistory":useHistory};
        sendContent(data).then(response => {

         // this.$message.success('保存成功')
         // this.$router.go(-1)
        }).catch(error => {
          this.$message.error(error.msg || error.message)
        })
      },
    }
  }

</script>
<style>

  .avue-chat .web__logo{
    display: none;
  }


  @media ( min-width: 576px) {
    .avue-chat .web__logo{
      display: none;
    }

    .avue-chat {
      width: 420px !important;
      height: 510px !important;
    }

    .web__content > div {
      width: 420px !important;
    }

    .avue-chat .web__footer {
      width: 420px !important;
    }
    .avue-chat .web__main {
      height: 300px !important;
      padding: 15px 15px 20px;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .avue-chat .web__content {
      height: 510px !important;
      display: flex;
    }
  }

  @media ( max-width: 576px) {
    .avue-chat {
      width: 100vw !important;
      height: 100vh !important;
    }



    .avue-chat .web__main {
      height: 70vh;
      padding: 1rem;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .avue-chat .web__content {
      height: 88vh;
      display: flex;
    }

    .web__footer{
      width: 100vw !important;
    }

    .web__content>div{
      width:100vw !important;
    }

  }
</style>
